<template>
  <div class="songs-container">
    <div class="tab-bar">
      <span class="item"
      v-for="(navObj, index) in navList"
      :key="index"
      :class="{active:tag == navObj.tag}"
      @click="tag = navObj.tag">{{navObj.name}}</span>
    </div>
    <table class="el-table playlit-table" v-loading="loading">
      <thead>
        <th></th>
        <th></th>
        <th>音乐标题</th>
        <th>歌手</th>
        <th>专辑</th>
        <th>时长</th>
      </thead>
      <tbody>
        <tr class="el-table__row"
        v-for="(newObj,index) in newSongList"
        :key="newObj.id">
          <td>{{index+1}}</td>
          <td>
            <div class="img-wrap">
              <img :src="newObj.album.picUrl" alt=""/>
              <span
              @click="playMusic(newObj.id)" class="iconfont icon-play"></span>
            </div>
          </td>
          <td>
            <div class="song-wrap">
              <div class="name-wrap">
                <span>{{newObj.name}}</span>
                <span class="iconfont icon-mv"></span>
              </div>
              <span></span>
            </div>
          </td>
          <!-- 歌手 -->
          <td>{{newObj.album.artists[0].name}}</td>
          <td>{{newObj.album.name}}</td>
          <td>{{newObj.duration | changeTime}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      navList: [
        { tag: 0, name: '全部' },
        { tag: 7, name: '华语' },
        { tag: 36, name: '欧美' },
        { tag: 96, name: '日本' },
        { tag: 16, name: '韩国' }
      ],
      tag: '0',
      newSongList: []
    }
  },
  created () {
    this.loadNew()
  },
  // 处理时间
  filters: {
    changeTime (time) {
      let min = parseInt(time / 1000 / 60)
      if (min < 10) {
        min = '0' + min
      }
      let sec = parseInt(time / 1000 % 60)
      if (sec < 10) {
        sec = '0' + sec
      }
      return `${min}分${sec}秒`
    }
  },
  // nav监听
  watch: {
    tag () {
      // console.log(this.tag)
      this.loadNew()
    }
  },
  methods: {
    loadNew () {
      axios({
        url: 'https://autumnfish.cn/top/song',
        method: 'get',
        params: {
          type: this.tag
        }
      }).then(res => {
        const { data } = res.data
        // 处理时长 毫秒转换为分秒
        // for (let i = 0; i < data.length; i++) {
        //   // 获取毫秒数
        //   const duration = data[i].duration
        //   // /1000
        //   // let s = duration/1000
        //   // let m = s/60
        //   // let h = s%6
        //   let min = parseInt(duration / 1000 / 60)
        //   if (min < 10) {
        //     min = '0' + min
        //   }
        //   let sec = parseInt(duration / 1000 % 60)
        //   if (sec < 10) {
        //     sec = '0' + sec
        //   }
        //   data[i].duration = min + ':' + sec
        // }
        this.newSongList = data
        // console.log(res)
      })
    },
    // 播放音乐
    playMusic (id) {
      axios({
        url: 'https://autumnfish.cn/song/url',
        method: 'get',
        params: {
          id
        }
      }).then(res => {
        // console.log(this.$parent.musicUrl)
        this.$parent.musicUrl = res.data.data[0].url
      })
    }
  }
}
</script>
